<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/k15.css}"/>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/font/iconfont.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body class="W-body">
<div class="in-wrap" id="aCoursesList">
    <div id="header">
        <!-- 最顶部 -->
        <div class="header-top" id="loginDiv">
            <div class="auto-width">
                <ul class="header-guide fl" style="width: 300px">
                    <li class="guide-item">
                        <a href="/">首页</a>
                    </li>
                    <li class="guide-item">
                        <a href="http://localhost:9999/search?tagId=0">分类</a>
                    </li>
                    <li class="guide-item">
                        <a href="http://localhost:9999/rankList">排行榜</a>
                    </li>
                </ul>
                <div class="search-box fl">
                    <form action="http://localhost:9999/search?" method="get">
                        <input type="text" class="fl search-text" placeholder="请输入漫画名" name="name" v-model="name">
                        <button class="fl search-btn">
                            <i class="iconfont icon-search"></i>
                        </button>
                    </form>
                </div>
                <ul class="header-guide fr" style="width: 300px">
                    <!--登录注册-->
                    <li v-if="!loginUser.username" class="guide-item">
                        <a href="http://localhost:9999/login">登录/注册</a>
                    </li>
                    <li class="guide-item login"  v-if="loginUser.username">
                        <a :href="'http://localhost:9999/person?loginUser.id'" >
                            <img :src="'http://localhost:8081/Imgs/headImg/'+loginUser.avatar" style="width: 40px;height: 40px;position:relative; top:5px" >&nbsp;&nbsp;
                            {{loginUser.username}}
                        </a>
                    </li>
                    <li class="guide-item history" v-if="loginUser.username">
                        <a href="" @click="userExit()">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
        <div class="bg-fa of" style="width: 1451px;background-color: #fff" >
            <section class="container">
                <section class="c-sort-box" id="app">
                    <section class="c-s-dl">
                        <div>
                            <dl>
                                <dt>
                                    <span class="c-999 fsize14">题材</span>
                                </dt>
                                <dd class="c-s-dl-li">
                                    <ul class="clearfix">
                                        <li :class="tagId==0?'current':''"><a href="javascript:void(0)"
                                                                              @click="changeTag(0)">全部</a></li>
                                        <li :class="t.id==tagId?'current':''" v-for="t in tlist"><a
                                                href="javascript:void(0)"
                                                @click="changeTag(t.id)">{{t.name}}</a>
                                        </li>
                                    </ul>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <span class="c-999 fsize14">取向</span>
                                </dt>
                                <dd class="c-s-dl-li">
                                    <ul class="clearfix">
                                        <li :class="num==-1?'current':''"><a href="javascript:void(0)"
                                                                             @click="changeSex(-1)">全部</a></li>
                                        <li :class="num==1?'current':''"><a href="javascript:void(0)"
                                                                            @click="changeSex(1)">男频</a></li>
                                        <li :class="num==0?'current':''"><a href="javascript:void(0)"
                                                                            @click="changeSex(0)">女频</a></li>
                                    </ul>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <span class="c-999 fsize14">排序</span>
                                </dt>
                                <dd class="c-s-dl-li">
                                    <ul class="clearfix">
                                        <li :class="orders==1?'current':''"><a title="全部" href="javascript:void(0)"
                                                                               @click="ranking(1)">人气推荐</a>
                                        </li>
                                        <li :class="orders==2?'current':''"><a title="全部" href="javascript:void(0)"
                                                                               @click="ranking(2)">更新时间</a>
                                        </li>
                                        <li :class="orders==3?'current':''"><a title="全部" href="javascript:void(0)"
                                                                               @click="ranking(3)">收藏排名</a>
                                        </li>
                                    </ul>
                                </dd>
                            </dl>
                        </div>
                    </section>
                    <div class="mt40">
                        <article class="comm-course-list">
                            <ul class="of">
                                <li v-for="r in rlist">
                                    <div>
                                        <div class="img">
                                            <a :href="'http://localhost:9999/comicDetail?id='+r.id">
                                                <img :src="'http://localhost:8081/imgs/resource/'+r.id+'/'+r.cover"
                                                     width="150px" height="200px"/>
                                            </a>
                                            <h3 class="hLh30 txtOf mt10">
                                                <a :href="'http://localhost:9999/comicDetail?id='+r.id" class="course-title fsize18 c-333">{{r.name}}</a>
                                            </h3>
                                        </div>
                                        <div class="fl jgAttr c-666 f-fA">
                                            <p v-if="r.sectionList">更新至:{{r.sectionList.name}}</p>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                            <div class="clear"></div>
                        </article>
                    </div>
                    <!-- 公共分页 开始 -->
                    <div class="paging">
                        <a @click="toFirstPage()" class="undisable" href="javascript:void(0)" title="">首页</a>
                        <a id="backpage" class="undisable" href="javascript:void(0)" @click="toPrevPage()" title="">&lt;</a>
                        <a id="nextpage" class="undisable" href="javascript:void(0)" @click="toNextPage()" title="">&gt;</a>
                        <a @click="toLastPage()" class="undisable" href="javascript:void(0)"  title="">末页</a>
                    </div>
                </section>
            </section>
        </div>
</div>
<!---------- 底部内容 ---------->
<div id="footer">
    <div class="container auto-width">
        <div class="footer-top clearfix">
            <div class="footer-nav fl">
                <div class="item">
                    <h4>合作</h4>
                    <p>
                        <a href="#">关于我们</a>
                        <a href="#">联系我们</a>
                        <br>
                        <a href="#">AC招聘</a>
                    </p>
                </div>
                <span class="line"></span>
                <div class="item">
                    <h4>官方</h4>
                    <p>
                        <a href="#">新浪微博</a>
                        <a href="#">官方网店</a>
                        <br>
                        <a href="#">微信公众号<img src="/images/footer-arcode.jpg" class="footer-orcode" alt="#"></a>
                    </p>
                </div>
                <span class="line"></span>
                <div class="item">
                    <h4>下载</h4>
                    <p>
                        <a href="#" class="mg-0">移动客户端</a>
                        <span class="new">new</span>
                        <br>
                        <a href="#">AC娘表情包</a>
                    </p>
                </div>
                <span class="line"></span>
                <div class="item">
                    <h4>友情链接</h4>
                    <p>
                        <a href="#">斗鱼直播</a>
                        <a href="#">匿名版</a>
                        <br>
                        <a href="#">AC大逃杀</a>
                    </p>
                </div>
                <span class="line"></span>
                <div class="item">
                    <h4>反馈</h4>
                    <p>
                        <a href="#">意见反馈</a>
                        <a href="#">举报</a>
                        <a href="#">帮助中心</a>
                        <br>
                        <a href="#">免责声明</a>
                        <a href="#">用户协议</a>
                    </p>
                </div>
            </div>
            <div class="footer-img fr">
                <img src="/images/footer-logo.gif" alt="#">
            </div>
        </div>
        <div class="footer-middle clearfix">
            <div class="item">
                <a href="#"><i class="icon icon-1"></i>中国互联网举报中心</a>
                <a href="#"><i class="icon icon-2"></i>网络文化经营单位</a>
            </div>
            <div class="item">
                <span>京8888888888号</span>
            </div>
            <div class="item">
                <span>节目制作经营许可证66666666666号</span>

            </div>
        </div>
        <div class="footer-bottom">
            <img src="/images/logo-gray.png" alt="#">
            <p>本站不提供任何视听上传服务，所有内容均来自视频分享站点所提供的公开引用资源。********</p>
        </div>
    </div>
</div>

<a href="javascript:;" id="back_top" class="iconfont icon-up"></a>

<script>

    let app = new Vue({
        el: "#aCoursesList",
        data: {
            loginUser:{
                id:'',
                username : '',
                avatar:'',
            },
            pageNum: 1,
            pageSize: 4,
            total: -1,
            tlist: [],
            rlist: [],
            name: "",
            num: -1,
            orders: 1,
            tagId: 0
        },
        methods: {
            GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = decodeURI(window.location.search).substr(1).match(reg);
                if (r != null) {
                    return unescape(r[2]);
                }
                return null;
            },
            toFirstPage() {
                this.pageNum = 1;
                this.initResource();
            },
            toPrevPage() {
                this.pageNum = this.pageNum - 1;
                this.initResource();
            },
            toNextPage() {
                this.pageNum = this.pageNum + 1;
                this.initResource();
            },
            toLastPage() {
                this.pageNum = this.total;
                this.initResource();
            },
            initResource() {
                let url = "resource/listResource";
                axios.get(url, {
                    params: {
                        tagId: this.tagId,
                        num: this.num,
                        name: this.name,
                        orders: this.orders,
                        now: this.pageNum,
                        size: this.pageSize
                    }
                })
                    .then((resp) => {
                        this.rlist = resp.data.data.list;
                        this.pageNum = resp.data.data.pageNum;
                        this.pageSize = resp.data.data.pageSize;
                        this.total = resp.data.data.total;
                    })
            },
            initTag() {
                let url = "tag/list";
                axios.get(url)
                    .then((resp) => {
                        this.tlist = resp.data;
                    })
            },
            changeTag(tt) {
                this.tagId = tt;
                this.initResource();
            },
            changeSex(dd) {
                this.num = dd;
                this.initResource();
            },
            // changeCharge(cc){
            //     this.prices=cc;
            //     this.initResource();
            // },
            ranking(oo) {
                this.orders = oo;
                this.initResource();
            },
            initParam() {
                this.tagId = this.GetQueryString('tagId')
                this.name = this.GetQueryString('name')
            },
            initUser(){
                let url = "http://localhost:9999/user/getLoginUser";
                axios.get(url).then(res=>{
                    if (res.data.code == 200){
                        this.loginUser=res.data.data;
                    }
                })
            },
            userExit(){
                let url= "http://localhost:9999/user/logout"
                axios.get(url).then((resp)=>{
                    if (resp.data!=200){
                        alert("网络繁忙请稍后重试")
                    }else {
                        location.reload()
                    }
                })
            },
        },
        created() {
            this.initParam();
            this.initTag();
            this.initResource();
            this.initUser();
        },
    })
</script>
</body>
</html>
